<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery按拼音首字母选择城市</title>




<link media="all" href="index_3.css" type="text/css" rel="stylesheet">
<link media="all" href="address.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class = "max">
<div class = "top">
	<div class = "city">
		<div class = "chose"><h3>请选择你所在的城市</h3></div>
		<div class = "pos"><span class = 'as'>选城市</span>> 定位置 > 叫外卖</div>
	</div>
	
	<div class = "guess">
	      <span >猜你在</span>　　　　
	      <button class = "bei">北京</button>
	</div>
	<div class = "input">
	    <input class="ng-pristine ng-valid" name="name" placeholder="请输入城市" ng-model="queryText" ng-keydown="mapCity.chooseFromQuery($event)" >
	</div>
</div>	
<div class="citybox">
	<h2>按拼音首字母选择<span class="arrow">»</span></h2>
	<ol>
		<li id="city-A" class="">
			<p class="cf">
				<span class="label"><strong>A</strong></span>
				<span><a class = "ccity">鞍山</a><a class = "ccity">安顺</a><a class = "ccity">阿坝</a><a class = "ccity">阿拉善</a><a class = "ccity">阿里</a><a class = "ccity">安康</a><a class = "ccity">阿克苏</a><a class = "ccity">安庆</a><a class = "ccity">阿勒泰</a><a class = "ccity">安阳</a><a class = "ccity">澳门</a></span>
			</p>
		</li>
		<li id="city-B" class="">
			<p class="cf">
				<span class="label"><strong>B</strong></span>
				<span><a class = "ccity">北京</a><a class = "ccity">包头</a><a class = "ccity">保定</a><a class = "ccity">巴中</a><a class = "ccity">蚌埠</a><a class = "ccity">白银</a><a class = "ccity">白城</a><a class = "ccity">白山</a><a class = "ccity">北海</a><a class = "ccity">巴彦淖尔</a><a class = "ccity">宝鸡</a><a class = "ccity">百色</a><a class = "ccity">本溪</a><a class = "ccity">保山</a><a class = "ccity">毕节</a><a class = "ccity">博尔塔拉</a><a class = "ccity">滨州</a><a class = "ccity">亳州</a><a class = "ccity">巴州</a></span>
			</p>
		</li>
		<li id="city-C">
			<p class="cf">
				<span class="label"><strong>C</strong></span>
				<span><a class = "ccity">成都</a><a class = "ccity">重庆</a><a class = "ccity">常州</a><a class = "ccity">长沙</a><a class = "ccity">长春</a><a class = "ccity">赤峰</a><a class = "ccity">楚雄</a><a class = "ccity">长治</a><a class = "ccity">巢湖</a><a class = "ccity">崇左</a><a class = "ccity">潮州</a><a class = "ccity">昌吉</a><a class = "ccity">沧州</a><a class = "ccity">郴州</a><a class = "ccity">常德</a><a class = "ccity">滁州</a><a class = "ccity">朝阳</a><a class = "ccity">昌都</a><a class = "ccity">池州</a><a class = "ccity">承德</a></span>
			</p>
		</li>
		<li id="city-D">
			<p class="cf">
				<span class="label"><strong>D</strong></span>
				<span><a class = "ccity">东莞</a><a class = "ccity">大连</a><a class = "ccity">东营</a><a class = "ccity">大庆</a><a class = "ccity">大同</a><a class = "ccity">大理</a><a class = "ccity">德阳</a><a class = "ccity">迪庆</a><a class = "ccity">达州</a><a class = "ccity">德州</a><a class = "ccity">丹东</a><a class = "ccity">大兴安岭</a><a class = "ccity">德宏</a><a class = "ccity">定西</a></span>
			</p>
		</li>
		<li id="city-E">
			<p class="cf">
				<span class="label"><strong>E</strong></span>
				<span><a class = "ccity">恩施</a><a class = "ccity">鄂州</a><a class = "ccity">鄂尔多斯</a></span>
			</p>
		</li>
		<li id="city-F" class="">
			<p class="cf">
				<span class="label"><strong>F</strong></span>
				<span><a class = "ccity">福州</a><a class = "ccity">佛山</a><a class = "ccity">抚顺</a><a class = "ccity">阜阳</a><a class = "ccity">抚州</a><a class = "ccity">防城港</a><a class = "ccity">阜新</a></span>
			</p>
		</li>
		<li id="city-G" class="">
			<p class="cf">
				<span class="label"><strong>G</strong></span>
				<span><a class = "ccity">广州</a><a class = "ccity">贵阳</a><a class = "ccity">桂林</a><a class = "ccity">赣州</a><a class = "ccity">广元</a><a class = "ccity">果洛</a><a class = "ccity">固原</a><a class = "ccity">甘南</a><a class = "ccity">甘孜</a><a class = "ccity">广安</a><a class = "ccity">贵港</a></span>
			</p>
		</li>
		<li id="city-H" class="">
			<p class="cf">
				<span class="label"><strong>H</strong></span>
				<span><a class = "ccity">杭州</a><a class = "ccity">哈尔滨</a><a class = "ccity">合肥</a><a class = "ccity">邯郸</a><a class = "ccity">惠州</a><a class = "ccity">海口</a><a class = "ccity">呼和浩特</a><a class = "ccity">衡阳</a><a class = "ccity">湖州</a><a class = "ccity">淮北</a><a class = "ccity">鹤岗</a><a class = "ccity">海北</a><a class = "ccity">海东</a><a class = "ccity">黄南</a><a class = "ccity">菏泽</a><a class = "ccity">海南州</a><a class = "ccity">黑河</a><a class = "ccity">和田</a><a class = "ccity">哈密</a><a class = "ccity">淮安</a><a class = "ccity">淮南</a><a class = "ccity">黄山</a><a class = "ccity">海西</a><a class = "ccity">贺州</a><a class = "ccity">怀化</a><a class = "ccity">河池</a><a class = "ccity">呼伦贝尔</a><a class = "ccity">衡水</a><a class = "ccity">河源</a><a class = "ccity">红河</a><a class = "ccity">汉中</a><a class = "ccity">黄冈</a><a class = "ccity">黄石</a><a class = "ccity">鹤壁</a><a class = "ccity">葫芦岛</a></span>
			</p>
		</li>
		<li id="city-J" class="">
			<p class="cf">
				<span class="label"><strong>J</strong></span>
				<span><a class = "ccity">济南</a><a class = "ccity">济宁</a><a class = "ccity">嘉兴</a><a class = "ccity">金华</a><a class = "ccity">焦作</a><a class = "ccity">荆州</a><a class = "ccity">吉林</a><a class = "ccity">锦州</a><a class = "ccity">江门</a><a class = "ccity">景德镇</a><a class = "ccity">吉安</a><a class = "ccity">佳木斯</a><a class = "ccity">酒泉</a><a class = "ccity">金昌</a><a class = "ccity">鸡西</a><a class = "ccity">济源</a><a class = "ccity">晋城</a><a class = "ccity">揭阳</a><a class = "ccity">晋中</a><a class = "ccity">荆门</a><a class = "ccity">九江</a></span>
			</p>
		</li>
		<li id="city-K" class="">
			<p class="cf">
				<span class="label"><strong>K</strong></span>
				<span><a class = "ccity">昆明</a><a class = "ccity">昆山</a><a class = "ccity">喀什</a><a class = "ccity">克拉玛依</a><a class = "ccity">开封</a><a class = "ccity">克州</a></span>
			</p>
		</li>
		<li id="city-L" class="">
			<p class="cf">
				<span class="label"><strong>L</strong></span>
				<span><a class = "ccity">兰州</a><a class = "ccity">临沂</a><a class = "ccity">连云港</a><a class = "ccity">聊城</a><a class = "ccity">临汾</a><a class = "ccity">柳州</a><a class = "ccity">洛阳</a><a class = "ccity">廊坊</a><a class = "ccity">龙岩</a><a class = "ccity">六盘水</a><a class = "ccity">凉山</a><a class = "ccity">六安</a><a class = "ccity">丽江</a><a class = "ccity">临沧</a><a class = "ccity">陇南</a><a class = "ccity">拉萨</a><a class = "ccity">辽源</a><a class = "ccity">辽阳</a><a class = "ccity">莱芜</a><a class = "ccity">漯河</a><a class = "ccity">吕梁</a><a class = "ccity">丽水</a><a class = "ccity">临夏</a><a class = "ccity">林芝</a><a class = "ccity">娄底</a><a class = "ccity">来宾</a><a class = "ccity">泸州</a><a class = "ccity">乐山</a></span>
			</p>
		</li>
		<li id="city-M" class="">
			<p class="cf">
				<span class="label"><strong>M</strong></span>
				<span><a class = "ccity">马鞍山</a><a class = "ccity">绵阳</a><a class = "ccity">茂名</a><a class = "ccity">牡丹江</a><a class = "ccity">梅州</a><a class = "ccity">眉山</a></span>
			</p>
		</li>
		<li id="city-N" class="">
			<p class="cf">
				<span class="label"><strong>N</strong></span>
				<span><a class = "ccity">南京</a><a class = "ccity">宁波</a><a class = "ccity">南通</a><a class = "ccity">南宁</a><a class = "ccity">南昌</a><a class = "ccity">南充</a><a class = "ccity">宁德</a><a class = "ccity">内江</a><a class = "ccity">怒江</a><a class = "ccity">南平</a><a class = "ccity">南阳</a><a class = "ccity">那曲</a></span>
			</p>
		</li>
		<li id="city-P" class="">
			<p class="cf">
				<span class="label"><strong>P</strong></span>
				<span><a class = "ccity">萍乡</a><a class = "ccity">平顶山</a><a class = "ccity">莆田</a><a class = "ccity">濮阳</a><a class = "ccity">攀枝花</a><a class = "ccity">平凉</a><a class = "ccity">普洱</a><a class = "ccity">盘锦</a></span>
			</p>
		</li>
		<li id="city-Q" class="">
			<p class="cf">
				<span class="label"><strong>Q</strong></span>
				<span><a class = "ccity">青岛</a><a class = "ccity">泉州</a><a class = "ccity">秦皇岛</a><a class = "ccity">齐齐哈尔</a><a class = "ccity">庆阳</a><a class = "ccity">衢州</a><a class = "ccity">黔西南</a><a class = "ccity">钦州</a><a class = "ccity">黔南</a><a class = "ccity">曲靖</a><a class = "ccity">黔东南</a><a class = "ccity">七台河</a><a class = "ccity">清远</a></span>
			</p>
		</li>
		<li id="city-R" class="">
			<p class="cf">
				<span class="label"><strong>R</strong></span>
				<span><a class = "ccity">日照</a><a class = "ccity">日喀则</a></span>
			</p>
		</li>
		<li id="city-S" class="">
			<p class="cf">
				<span class="label"><strong>S</strong></span>
				<span><a class = "ccity">上海</a><a class = "ccity">深圳</a><a class = "ccity">沈阳</a><a class = "ccity">苏州</a><a class = "ccity">石家庄</a><a class = "ccity">绍兴</a><a class = "ccity">顺德</a><a class = "ccity">三亚</a><a class = "ccity">韶关</a><a class = "ccity">绥化</a><a class = "ccity">松原</a><a class = "ccity">上饶</a><a class = "ccity">十堰</a><a class = "ccity">三门峡</a><a class = "ccity">山南</a><a class = "ccity">邵阳</a><a class = "ccity">遂宁</a><a class = "ccity">商丘</a><a class = "ccity">朔州</a><a class = "ccity">随州</a><a class = "ccity">汕尾</a><a class = "ccity">四平</a><a class = "ccity">三峡</a><a class = "ccity">宿迁</a><a class = "ccity">三明</a><a class = "ccity">石嘴山</a><a class = "ccity">双鸭山</a><a class = "ccity">汕头</a><a class = "ccity">宿州</a><a class = "ccity">商洛</a></span>
			</p>
		</li>
		<li id="city-T">
			<p class="cf">
				<span class="label"><strong>T</strong></span>
				<span><a class = "ccity">天津</a><a class = "ccity">太原</a><a class = "ccity">泰安</a><a class = "ccity">台州</a><a class = "ccity">唐山</a><a class = "ccity">泰州</a><a class = "ccity">塔城</a><a class = "ccity">铜陵</a><a class = "ccity">铜川</a><a class = "ccity">台北</a><a class = "ccity">铜仁</a><a class = "ccity">吐鲁番</a><a class = "ccity">天水</a><a class = "ccity">通辽</a><a class = "ccity">铁岭</a><a class = "ccity">通化</a></span>
			</p>
		</li>
		<li id="city-W" class="">
			<p class="cf">
				<span class="label"><strong>W</strong></span>
				<span><a class = "ccity">武汉</a><a class = "ccity">无锡</a><a class = "ccity">温州</a><a class = "ccity">芜湖</a><a class = "ccity">威海</a><a class = "ccity">潍坊</a><a class = "ccity">乌鲁木齐</a><a class = "ccity">梧州</a><a class = "ccity">吴忠</a><a class = "ccity">武威</a><a class = "ccity">渭南</a><a class = "ccity">乌兰察布</a><a class = "ccity">文山</a><a class = "ccity">乌海</a></span>
			</p>
		</li>
		<li id="city-X">
			<p class="cf">
				<span class="label"><strong>X</strong></span>
				<span><a class = "ccity">西安</a><a class = "ccity">厦门</a><a class = "ccity">徐州</a><a class = "ccity">襄阳</a><a class = "ccity">西宁</a><a class = "ccity">孝感</a><a class = "ccity">西双版纳</a><a class = "ccity">新余</a><a class = "ccity">湘潭</a><a class = "ccity">锡林郭勒</a><a class = "ccity">兴安</a><a class = "ccity">邢台</a><a class = "ccity">新乡</a><a class = "ccity">湘西</a><a class = "ccity">忻州</a><a class = "ccity">咸阳</a><a class = "ccity">宣城</a><a class = "ccity">香港</a><a class = "ccity">信阳</a><a class = "ccity">咸宁</a><a class = "ccity">许昌</a></span>
			</p>
		</li>
		<li id="city-Y" class="">
			<p class="cf">
				<span class="label"><strong>Y</strong></span>
				<span><a class = "ccity">扬州</a><a class = "ccity">烟台</a><a class = "ccity">盐城</a><a class = "ccity">运城</a><a class = "ccity">义乌</a><a class = "ccity">岳阳</a><a class = "ccity">宜昌</a><a class = "ccity">玉林</a><a class = "ccity">银川</a><a class = "ccity">鹰潭</a><a class = "ccity">雅安</a><a class = "ccity">伊犁</a><a class = "ccity">玉树</a><a class = "ccity">宜春</a><a class = "ccity">营口</a><a class = "ccity">永州</a><a class = "ccity">宜宾</a><a class = "ccity">益阳</a><a class = "ccity">玉溪</a><a class = "ccity">阳泉</a><a class = "ccity">延安</a><a class = "ccity">榆林</a><a class = "ccity">云浮</a><a class = "ccity">延边</a><a class = "ccity">阳江</a><a class = "ccity">伊春</a></span>
			</p>
		</li>
		<li id="city-Z">
			<p class="cf">
				<span class="label"><strong>Z</strong></span>
				<span><a class = "ccity">郑州</a><a class = "ccity">镇江</a><a class = "ccity">中山</a><a class = "ccity">淄博</a><a class = "ccity">珠海</a><a class = "ccity">遵义</a><a class = "ccity">株洲</a><a class = "ccity">自贡</a><a class = "ccity">舟山</a><a class = "ccity">湛江</a><a class = "ccity">肇庆</a><a class = "ccity">漳州</a><a class = "ccity">张掖</a><a class = "ccity">昭通</a><a class = "ccity">张家界</a><a class = "ccity">周口</a><a class = "ccity">驻马店</a><a class = "ccity">张家口</a><a class = "ccity">资阳</a><a class = "ccity">中卫</a><a class = "ccity">枣庄</a></span>
			</p>
		</li>
	</ol>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function (){
	$(".citybox li").hover(function(){
		$(this).addClass('hover');
	}, function(){
		$(this).removeClass('hover');
	});	
});
</script>




</body>
</html>
